<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去哪儿旅行</title>
    <style type="text/css">
        .header{
            width: 1250px;
            margin: 0 auto;
            background: #F7F7F7;
            height: 80px;
        }
        .top{
            margin-left: 30px;
            height: 80px;
        }
        .input_box{
            margin-right: 30px;
            margin-top: 20px;
            height: 35px;
            width: 230px;
            border: 1px solid #E6E6E6;
            display: inline-block;
            background: #FFFFFF;
        }
        .name{
            vertical-align: middle;
            color: #9E9E9E;
            text-align: center;
            margin-left: 10px;
            font-size: 14px;
        }
        .in_line{
            margin: 0 auto;
            border: 0 hidden;
            outline: none;
            height: 33px;
        }
        .in_line input:focus{
            border: 0 hidden;
            outline: none;
        }
        .search_button{
            border: 0 hidden;
            background: #FF714A;
            height: 35px;
            width: 120px;
            display: inline-block;
            text-align: center;
            border-radius: 17px;
        }
        .search_text{
            margin: 0 auto;
            height: 33px;
            display: inline-block;
            line-height: 35px;
            font-size: 13px;
            color: #FFFFFF;
        }
        .middle{
            width: 1250px;
            margin-top: 5px;
            border: 1px solid #EEEEEE;
            color: #616161;

        }
        .attrib{
            margin-left: 30px;
            color: #000000;
            font-size: 13px;
            line-height: 13px;
        }
        .checkbox{
            vertical-align: middle;
        }
        ul{
            display: inline-block;
        }
        li{
            list-style: none;
            display: inline-block;
            margin-right: 30px;
            font-size: 13px;
        }
        .input_box2{
            margin-left: 10px;
            border: 1px solid #E6E6E6;
            display: inline-block;
            background: #FFFFFF;
        }
        .in_line2{
            margin: 0 auto;
            border: 0 hidden;
            outline: none;
            width: 50px;
            font-size: 15px;
            line-height: 15px;
        }
        .search_button2{
            border: 0 hidden;
            background: #FFEAE4;
            height: 26px;
            width: 70px;
            display: inline-block;
            text-align: center;
            border-radius: 13px;
        }
        .search_text2{
            margin: 0 auto;
            height: 26px;
            display: inline-block;
            line-height: 26px;
            color: #FF714A;
        }
        .selected{
            background: #0AC4DD;
            color: #FFFFFF;
            width: 40px;
            height: 25px;
            line-height: 25px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="top">
            <div class="input_box">
                <span class="name">目的地</span>
                <input class="in_line">
            </div>
            <div class="input_box">
                <span class="name">入住</span>
                <input class="in_line">
            </div>
            <div class="input_box">
                <span class="name">离店</span>
                <input class="in_line">
            </div>
            <div class="input_box">
                <span class="name">关键词</span>
                <input class="in_line">
            </div>
                <span class="search_button"> <span class="search_text">搜索</span></span>
        </div>
        <div class="middle">
            <div>
                <span class="attrib"><b>位置</b></span>
                <ul>
                    <li class="selected">不限</li>
                    <li>热门∨</li>
                    <li>距离∨</li>
                    <li>商业区∨</li>
                    <li>行政区∨</li>
                    <li>热门景点∨</li>
                    <li>机场车站∨</li>
                    <li>地铁线路∨</li>
                    <li>大学周边∨</li>
                    <li>医院周边∨</li>
                </ul>
            </div>
            <div>
                <span class="attrib"><b>价格</b></span>
                <ul>
                    <li class="selected">不限</li>
                    <li>￥150以下</li>
                    <li>￥150-300</li>
                    <li>￥300-450</li>
                    <li>￥450-600</li>
                    <li>￥600以上</li>
                    <li>自定义
                        <div class="input_box2">
                            <span class="name2">￥</span>
                            <input class="in_line2">
                        </div>-
                        <div class="input_box2">
                            <span class="name2">￥</span>
                            <input class="in_line2">
                        </div>
                        <a href=""><span class="search_button2"><span class="search_text2">搜索</span></span></a>
                    </li>
                </ul>
            </div>
            <div>
                <span class="attrib"><b>星级</b></span>
                <ul>
                    <li class="selected">不限</li>
                    <li><input class="checkbox" type="checkbox">二星及以下/经济</li>
                    <li><input class="checkbox" type="checkbox">三星/舒适</li>
                    <li><input class="checkbox" type="checkbox">四星/高档</li>
                    <li><input class="checkbox" type="checkbox">五星/豪华</li>
                </ul>
            </div>
            <div>
                <span class="attrib"><b>筛选</b></span>
                <ul>
                    <li class="selected">不限</li>
                    <li>酒店类型∨</li>
                    <li>促销优惠∨</li>
                    <li>主题类型∨</li>
                    <li>点评推荐∨</li>
                    <li>酒店服务∨</li>
                    <li>住客印象∨</li>
                    <li>房型餐食∨</li>
                    <li>酒店品牌∨</li>
                    <li>设施服务∨</li>
                </ul>
            </div>
            <div>
                <span class="attrib"><b>热门</b></span>
                <ul>
                    <li class="selected">不限</li>
                    <li>助眠零压房</li>
                    <li>惬意spa</li>
                    <li>网红美宿</li>
                    <li>钟点房</li>
                    <li>含早餐</li>
                    <li>新开业/装修</li>
                    <li>中文服务</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>